[00:00] Welcome back. All right. Now it's time to create our overview and really take a look at flex containers since we're going to be using them quite a bit with this project. But let's stay organized. So in our project browser in the upper left hand corner, under perspective there's this views item. I'm going to right click on it and I'm going to select new folder. Let's create a folder in there so we can kind of stay organized with different views here. I'm going to call this folder primary views and that will make a little bit more sense later on when we start talking about pages. But for right now we'll just use this name and we'll click create folder. Now with that new folder selected we need to create a view inside of it. So I can right click on it and select new view or I can click the create new view button. Either option works. I'll just go with the right click menu. And we saw this window here in the or this pop-up window here in the last video.

[01:01] Let's go ahead and call this a new view overview and let's change the root container type from coordinate. Let's switch that to flex container. The page URL unlike the last video we're going to leave this alone. We'll leave it checked and then we'll have the field actually be just a slash. So we'll leave that alone. I'll click create view. All right, so looks kind of similar to last time with the coordinate container, nothing too crazy here. Let's try to add some components here. So I'm going to head over to the component palette and how about under display? I'll grab a cylindrical tank and I'm going to drag that and drop it into the center of this container. And you'll notice that it actually placed it towards the top. I'm going to try that again. So another tank towards the bottom this time and you notice it placed over here and we'll do one more because I want a third. So unlike the coordinate container the flex container has specific rules for where it wants to position the component. So coordinate containers everything has a coordinate, right?

[02:05] It has an X and a Y with an height. Instead, we're basically in the flex container trying to put these objects in sequence in a direction. I'm going to get the component pallet out of the way here. Now if I start selecting these from top to bottom you'll notice that the order that these were created in is listed in the project browser. And so top to bottom in the project browser and top to bottom over here. That just happens to be, that's just coincidence, that's not normal paradigm in perspective but I did want to point out that the first one I created happens to be at the top. Now to make these look a little different I'm going to make some minor changes to the components. So with the first one selected, I'm going to change the value to 100, I'll hit enter. For the second one I'll select that, I'll change the value to 50, I'll hit enter. And then for the last one that I added I'm not going to change it, we'll leave it with a value of zero. So these look a little different now. And when certain components are deeply selected you sometimes get an extra piece of interface to help you work with a component.

[03:07] The flex container is one such component. So our root container is currently deeply selected and as a result the top of the property editor gives us this extra little panel here. So this little panel here is actually a bunch of shortcuts for properties that are on the container itself. So if I select the root container which is a type of flex container or set to a type of flex container, I should say, we do have some other properties here. So the buttons up here correspond to the properties on the root container. So if I change direction here to row it sets direction on the component to row. We have this extra panel here just because it makes it a little bit easier for you to change these flex settings while you have other components normally selected. You don't have to have the root always selected. But you'll also notice that when I change this to row, well now they're going from left to right. Left most one or the first component on the left and then the second one to the right of that and so on and so forth. So again, flex containers have basically a direction they're trying to place their children in. You can determine that direction, right?

[04:08] So right now, some left, right. When it was a column it was from top to bottom. There's also a reverse button over here. So if I click on that you can see that the start is now the bottom and then we have the second one and then we have our third one, right? So we're stacking them upwards now. And of course, row can have a reverse. So if I switch to row and reverse is still selected. All right, now we're starting on the right. So the first one on the right, second one to the left of that and so on. Now I'm going to leave row but I'm going to turn off reverse and let's add actually another flex container. So what I'd like to do is go back to the component pallet here and under container I'm going to grab a flex container and I'm going to drag that into our first container. So that actually creates a flex container as a direct child to our root container, right? Now if I wanted to put stuff inside of here, if I wanted to put components specifically inside of this new flex container and not outside of it, what I can do is I can deep select this flex container.

[05:07] So I'll double click on this flex container which changes our selection, right? It grays out everything around it and even tells us we can start dragging things into this container. So I'll go back to the component pallet here. And how about this time we'll grab a motor under symbols? So I'm going to drag motor and I'll grab a pump as well. And if we get the component pallet out of the way here these are also in a row right now but we'll also notice because we deeply selected this flex container that's a child to the root, right? It has the little target icon so we know that it's deeply selected right now. This little panel here will control that container. It won't control or change the root container. So if I change this to a column it stacks the components inside of the nested flex container here in a column. But it doesn't impact with the root container. The root container is still set to row. So things are still going left to right, right?

[06:04] So you can kind of nest these flex containers and come up with more sort of complex layouts just by kind of stacking them like this. Now I'm going to get rid of this flex container here. I don't actually need this one so I'm going to right click on it and then I'll select delete and I'll click yes. Okay, so if I try resizing this container here we do notice that my tanks are always trying to basically maximize one of the axes or axis. So this is set to a row which means the cross axis is trying to stretch fully, right? So there's taking up the full vertical width here and you saw the opposite when it was set to column, right? So it's top going from top to bottom but the cross axis is trying to stretch and take up as much room as possible. There's a little bit of padding here but that's just because the component has a little bit of padding. If you select it, one of the components you can see that their selection box actually goes to the edges of the container. So we'll go back to row here. Now, for the flex container it does allow you to sort of control a little bit what's going on with the cross axis.

[07:05] That's actually what the items set of buttons here are for. So for right now it's set to stretch. So on the cross axis is going to try to stretch across the entire length. So we could instead just center it. All right, so I click on center there, right? It tries to basically stay in the center regardless of how much space is there vertically it's trying to just kind of center itself. Now, even here we have some extra space on the right. So but these are definitely stuck on the left-hand side. So we can actually change the centering here as well. So for justify, that kind of determines sort of positioning of the components within this container along the direction. So the set of flex starts, so starts at the start of the flex container. Again, we've established that that's the left side so I could change this to center. So now they kind of moved to the center and again they're smart enough to know when they lose space. Now at a certain point they start to shrink when they lose horizontal space here. So one of the things that's really cool about the flex container is that you can just turn on wrapping which you probably already found this little button over here.

[08:07] So if I turn that on we do get a little content row here which allows us to further manipulate it. But if I were to go ahead and make a little bit narrower you can see that it's now just starting to wrap them before it starts to shrink, right? I tries to not drink them unless it has to. So already this container is way better than the corner containers. It got a lot more tools and controls. Next I'm going to turn the wrap off. I'll click on don't wrap. Notice that these tanks, they do shrink but they don't grow, right? They don't get bigger. They just have like a max size and then they start shrinking, right? If there's extra space they don't necessarily get bigger. So, you can actually change that. I'm going to select the leftmost one here and that has to do with the position properties. So, if I select a component in here and I look at the position properties for that component these look way different than the coordinate container and that's because in perspective, when a component is inside of a container the position properties there are dictated by the parent container.

[09:08] So the parent containers, all the containers work a little bit differently. They have different rules and they basically apply certain rules to the components within them. And those components have to sort of figure out their positioning based off of whatever container they're in effectively. So coordinate containers have X, Y within height positions, flex containers don't. Instead we have this grow, shrink and basis properties. So basis to start with is sort of the, you can kind of see from the tool tip there, it's sort of the recommended or default or preferred. However you want to word it a size and this is applied along the same direction as the container. So right now, this is referring to width, right? Now because I'm centering here it is doing some shenanigans to try to figure out and change the height. It's trying to maintain a general ratio in regards to size. So it is making a little bit taller but if we set this to stretch that wouldn't be the case because, of course, it's already taken up all the height that it can but notice as I kind of drag along the same direction here the basis does change, right?

[10:06] So we can make these bigger or change the size of these if we want to. I'm going to set that back to 160 though for now. So set to 160, hit enter, 160 pixels I'll hit enter. And now shrink here is set to one. So shrink is basically whether or not this component should shrink and really the rate at which it should shrink. So, by default all the components you place inside of a flex container will have a shrink value of one. So if I set this to zero and hit enter that basically turns off shrinking effectively. So if I select the container here and I try to reduce the width you'll notice that the second and third will shrink but the first one will not shrink anymore. It'll even get a little scroll bar if it starts running out of room, it's being stubborn. It's not supposed to shrink. So it doesn't shrink. Now that's also why it's not growing. So if I select this first one here we can see that there's a grow property and that's set to zero. So if I set this to one, I'm going to hit enter and you're going to immediately see the tank resize.

[11:07] So it sees that it has more space above its basis and so it tries to take that. So I should mention that the grow and shrink, they work in tandem with the basis. So if the basis is sort of the starting point or the preferred point then the component will only grow or shrink if there's room or there's a requirement that it needs to deviate from its basis at some point. So by setting row to one I'm basically saying, hey, you're allowed to get bigger than your basis. If I set shrink to one I'm saying, oh, hey you're allowed to get smaller than your basis if you need to, right? So it all comes back to basis. But yeah, with gross set to one here it already immediately took up some extra space. It saw that there was enough room for it to get a little bit bigger, bigger than the 160 pixels width that it had. And it saw that there is some available space in the container. So it grew to take that up. So if I try to make my contain a little bit bigger you're going to notice it's going to keep growing cause it keeps getting more and more space. Now, check this out. If I select the second tank and I tell this it can also grow.

[12:03] As soon as I hit enter here, I haven't hit enter yet, but as soon as I hit enter here the first tank is going to shrink a little bit and then the second tank is going to become as large as the first tank. So I'm going to hit enter and you're going to see that as I resize the container they grow together. So, it's kind of interesting. These grow and shrink properties they're actually being applied with the knowledge of what the sibling components are doing. So, the first one got smaller because it knew it's allowed to grow and I know that it has a new sibling that is also allowed to grow and at the same rate. So they basically have to grow together which also means you can kind of control the rate a little bit. So, to kind of bring this point home a little bit more. So I'm going to select the first one here. I'm going to set grow to two and I'm going to set shrink to two. So it's going to grow at a quicker rate than the second one and it's also going to shrink at a quick rate than the second one, right? So again, the second one here is set to grow of one and one and for the third one, we'll use this as our control. We'll set shrink to zero and grow to zero. So it's not allowed to grow or shrink at all.

[13:06] So you're going to notice as I resize the container here we'll get to about basis, right? Where there are about the same. As I get smaller and smaller the leftmost one is shrinking at an increased rate than the second one. And then as there's more room the first one is growing at an increased rate. So again, these components they are aware of what their siblings are set to. Okay, so why is this important? Who cares? Well, say you have maybe a table, right? On a view somewhere. And then you have some maybe some graphics or some displays or something. Well, because of how the visibility on the table works. Maybe if you have a lot of cells in there, maybe you really don't want the table to shrink, right? Or if it's going to shrink it needs to shrink at a drastically reduced rate because as soon as you start making the table smaller it's going to get harder and harder to see what's inside of those cells, right? So you can kind of use this grow and shrink settings here to sort of control at what rate to that should happen. So you can maybe make your graphics and maybe your not essential components shrink a little bit quicker just to maintain and kind of preserve as much room for the table as possible. Okay, so that's sort of our quick sort of explanation and demonstration of what a flex container is. In the next lesson we're going to go ahead and take a simple look at just kind of trying to run this application or get a session open and also talk about pages.